<template>
  	<uni-actionsheet :show="popData.isShow" position="right" @close="onConfirmSelect">
			<view class="drawer">
				<view class="cont-box">
					<view class="pop-head">{{popData.title}}</view>
          <view class="class-box">
            <scroll-view scroll-y class="left-aside">
              <view
                v-for="item in pickerList"
                :key="item.id"
                class="f-item"
                :class="{active: item.id === currentId}"
                @click="changeTab(item)"
              >
                {{item.name}}
              </view>
            </scroll-view>
            <scroll-view scroll-y class="right-aside">
              <view v-for="(pitem, pindex) in classList" :key="pindex">
                <view class="ptitle">{{pitem.name}}</view>
                <view class="item">
                  <view
                    v-for="(item, index) in pitem.children"
                    class="card"
                    :key="index"
                    @click="chooseHandler(item)"
                  >
                    <view>
                      <image :src="item.icon" />
                      <view>{{item.name}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
					<view class="cancel" @click="onConfirmSelect">取消</view>
				</view>
			</view>	
		</uni-actionsheet>
</template>
<script>

export default {
  props: {
    // 默认picker选中项索引
    pickerList:{
      type: Array,
      default:()=>([])
    }
  },
  watch:{
    pickerList:{
      handler(newVal){
        console.log(newVal)
        if(newVal&&newVal[0]) {
          this.changeTab(newVal[0])
        }
      },
      deep:true,
      immediate: true
    }
  },
  data() {
    return {
      popData:{
        isShow:false,
        title: '选择类目'
      }, // 弹窗信息
      classList: [],
      currentId:0
    }
  },
  methods: {
    showPicker(){
      this.popData.isShow = true
    },
    onConfirmSelect() {
      this.popData.isShow = false
    },
    chooseHandler(item){
      this.$emit('onConfirm', item)
      this.onConfirmSelect()
    },
    changeTab(item) {
      this.currentId = item.id
      this.classList = item.children || []
      console.log(this.classList)
    }
  }
}
</script>
<style lang="scss" scoped>
.pop-head{
  font-size: 30upx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 106upx;
  border-bottom: 2px solid #F5F5F5;
}
.class-box{
  overflow: hidden;
  height: calc(100vh - 106upx);
  position: relative;
}
.left-aside {
		flex-shrink: 0;
		width: 172upx;
    background: #F5F5F5;
		position: absolute;
		z-index: 11;
		left: 0;
		top: 0;
		bottom:0;
		overflow-y:auto;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 96upx;
		font-size: 28upx;
		color: #444444;
		position: relative;
    font-weight: 400;
    border-bottom: 1px solid #fff;
		&.active{
			font-weight: bold;
      color: #4083F0;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 100%;
				width: 8upx;
				height: 50upx;
				background: #4083F0;
			}
		}
	}
	.right-aside{
		padding: 0 0 30upx 172upx;
		width: 100%;
    height: 100%;
    overflow-y:auto;
    box-sizing: border-box;
    .ptitle{
      text-align: left;
      margin: 30upx 0 10upx 20upx;
      font-size: 28upx;
      font-weight: bold;
    }
    .item{
      display: flex;
      flex-wrap: wrap;
    }
    .card{
      width: 33.3%;
      font-size: 24upx;
      color: #666;
      text-align: center;
      margin-top: 30upx;
      image{
        background: #F5F5F5;
        width: 108upx;
        height: 108upx;
        display: block;
        margin: 0 auto 16upx;
      }
    }
	}
</style>